<div class="container">
    <div class="card">
    
      <div class="card-header">
          <button type="button" class="btn btn-outline-success" (click)="addSinglepage()">新增</button>
      </div>
    
      <div class="card-body">
      <table class="table table-hover">
        <thead >
          <tr>
            <th scope="col"></th>
            <th scope="col">标题</th>
            <th scope="col">摘要</th>
            <th scope="col">图片</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let s of sl" >
            <th scope="row">*</th>
            <td>{{s.title}}</td>
            <td>{{s.summary}}</td>
            <td>
                <img src="{{s.img}}" width="200" height="200"/>
            </td>
            <td>
                <button type="button" class="btn btn-outline-warning" (click)="updateSinglepage(s.singlepageid)">修改</button>
                <button type="button" class="btn btn-outline-danger" (click)="deleteSinglepage(s.singlepageid)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
      </div>
    
      <div class="card-foot">
          <nav aria-label="Page navigation example">
            <ul class="Pagination" style="float:left">
              <li class="page-item" style="float:left;list-style-type:none"><a class="page-link" href="#">Previous</a></li>
              <li class="page-item" style="float:left;list-style-type:none"><a class="page-link" href="#">1</a></li>
              <li class="page-item" style="float:left;list-style-type:none"><a class="page-link" href="#">2</a></li>
              <li class="page-item" style="float:left;list-style-type:none"><a class="page-link" href="#">3</a></li>
              <li class="page-item" style="float:left;list-style-type:none"><a class="page-link" href="#">Next</a></li>
            </ul>
         </nav>
        </div>
    